<template>
  <div>
    <div id="map"
         ref="map" />
  </div>
</template>

<script>
import Echarts from 'echarts'

// eslint-disable-next-line no-unused-vars
import china from 'echarts/map/js/china' // 中国地图数据

function randomData () {
  return Math.round(Math.random() * 100)
}

var data = [

  {
    name: '齐齐哈尔'
  }, {
    name: '拉萨'
  }, {
    name: '上海浦东'
  }, {
    name: '攀枝花'
  }, {
    name: '北京市'
  },
  {
    name: '广州'
  },
  {
    name: '乌鲁木齐'
  }

]

var geoCoordMap = {

  '齐齐哈尔': [123.97, 47.33],
  '拉萨': [91.11, 29.97],
  '上海浦东': [121.48, 31.22],
  '攀枝花': [101.718637, 26.582347],
  '北京市': [116.4551, 40.2539],
  '广州': [113.23, 23.16],
  '乌鲁木齐': [87.68, 43.77]

}
var color = ['#ffa022', 'red', '#a6c84c']

var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'

var dataFrom = '北京市'

var convertData = function (data) {
  var res = []

  for (var i = 0; i < data.length; i++) {
    var geoCoord = geoCoordMap[data[i].name]

    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value)
      })
    }
  }

  return res
}

export default {
  components: {},
  props: {},
  data () {
    return {
      option: {

        title: {
          text: '迁徙图练习',
          subtext: '',
          itemGap: 30,

          left: 'center',
          textStyle: {

            color: '#1a1b4e',

            fontStyle: 'normal',

            fontWeight: 'bold',

            fontSize: 18

          },

          subtextStyle: {

            color: '#58d9df',

            fontStyle: 'normal',

            fontWeight: 'bold',

            fontSize: 14

          }
        },

        tooltip: {
          trigger: 'item'

        },

        visualMap: {
          min: 0,
          max: 100,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],
          calculable: true,
          inRange: {
            color: ['#ffffff', '#E0DAFF', '#ADBFFF', '#9CB4FF', '#6A9DFF', '#3889FF']
          }
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: {
              readOnly: false
            },
            restore: {},
            saveAsImage: {}
          }
        },

        geo: {
          map: 'china',
          label: {
            normal: {

              show: true,
              color: '#c1c4c8'
            },
            emphasis: {
              show: false,
              color: '#292929'
            }
          },
          roam: true,
          zoom: 1.2,
          itemStyle: {
            normal: {
              areaColor: '#fbfbfb',
              borderColor: '#b9b4b7'

            },
            emphasis: {

            }
          }
        },
        series: [
          {
            name: '尾巴',
            type: 'lines',
            zlevel: 3,
            effect: {
              show: true,
              period: 6,
              trailLength: 0.7,
              color: '#fff',
              symbolSize: 3
            },
            lineStyle: {
              normal: {
                color: color[1],
                width: 0,
                curveness: 0.2
              }
            },
            data: data.map(function (dataItem) {
              return {
                fromName: dataFrom,
                toName: dataItem.name,
                coords: [
                  geoCoordMap[dataFrom],
                  geoCoordMap[dataItem.name]
                ]
              }
            })
          },
          {
            name: '北京市',
            type: 'lines',
            zlevel: 2,
            symbol: ['none', 'arrow'],
            symbolSize: 10,
            effect: {
              show: true,
              period: 6,
              symbol: planePath,
              trailLength: 0,
              symbolSize: 15

            },
            lineStyle: {
              normal: {
                color: color[1],
                width: 2,
                opacity: 0.5,
                curveness: 0.2
              }
            },
            data: data.map(function (dataItem) {
              return {
                fromName: dataFrom,
                toName: dataItem.name,
                coords: [
                  geoCoordMap[dataFrom],
                  geoCoordMap[dataItem.name]
                ]
              }
            })
          }, {
            name: '',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: 8,
            showEffectOn: 'render',
            rippleEffect: {
              scale: 5,
              brushType: 'stroke'
            },

            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: color[1],
                shadowBlur: 20,
                shadowColor: '#333'
              }
            }
          }, {
            type: 'map',
            mapType: 'china',
            geoIndex: 0,
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            data: [{
              name: '北京',
              value: randomData()
            }, {
              name: '天津',
              value: randomData()
            }, {
              name: '上海',
              value: randomData()
            }, {
              name: '重庆',
              value: randomData()
            }, {
              name: '河北',
              value: randomData()
            }, {
              name: '河南',
              value: randomData()
            }, {
              name: '云南',
              value: randomData()
            }, {
              name: '辽宁',
              value: randomData()
            }, {
              name: '黑龙江',
              value: randomData()
            }, {
              name: '湖南',
              value: randomData()
            }, {
              name: '安徽',
              value: randomData()
            }, {
              name: '山东',
              value: randomData()
            }, {
              name: '新疆',
              value: randomData()
            }, {
              name: '江苏',
              value: randomData()
            }, {
              name: '浙江',
              value: randomData()
            }, {
              name: '江西',
              value: randomData()
            }, {
              name: '湖北',
              value: randomData()
            }, {
              name: '广西',
              value: randomData()
            }, {
              name: '甘肃',
              value: randomData()
            }, {
              name: '山西',
              value: randomData()
            }, {
              name: '内蒙古',
              value: randomData()
            }, {
              name: '陕西',
              value: randomData()
            }, {
              name: '吉林',
              value: randomData()
            }, {
              name: '福建',
              value: randomData()
            }, {
              name: '贵州',
              value: randomData()
            }, {
              name: '广东',
              value: randomData()
            }, {
              name: '青海',
              value: randomData()
            }, {
              name: '西藏',
              value: randomData()
            }, {
              name: '四川',
              value: randomData()
            }, {
              name: '宁夏',
              value: randomData()
            }, {
              name: '海南',
              value: randomData()
            }, {
              name: '台湾',
              value: randomData()
            }, {
              name: '香港',
              value: randomData()
            }, {
              name: '澳门',
              value: randomData()
            }]
          }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created () { },
  mounted () {
    this.setEcharts()
  },
  methods: {
    setEcharts () {
      const dom = this.$refs.map
      Echarts.dispose(dom)
      this.myEcharts = Echarts.init(dom)
      this.myEcharts.setOption(this.option)
    }
  }
}
</script>

<style lang="scss" scoped>
#map {
  margin: 5vh auto;
  width: 160vh;
  height: 70vh;
}
</style>
